<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>登陆MyWebSSH</title>
    <link rel="stylesheet" href="../static/assets/libs/particles/css/style.css">
    <link rel="stylesheet" href="../static/assets/css/base.css">
    <link rel="stylesheet" href="../static/css/xterm.css"/>
    <script src="../static/js/jquery-3.4.1.min.js"></script>
    <script src="../static/js/xterm.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../static/assets/css/login.css"/>
    <script src="../static/js/webssh.js" charset="utf-8"></script>
    <script>
        function connect() {
            var ip = document.getElementById('ip').value;
            var port = document.getElementById('port').value;
            var username = document.getElementById('username').value;
            var pwd = document.getElementById('pwd').value;

            openTerminal({
                operate: 'connect',
                host: ip,//IP
                port: port,//端口号
                username: username,//用户名
                password: pwd,  //密码
            });
            document.getElementById("terminal").style.display = "block";
            document.getElementById("input").style.display = "none";

        }

        function openTerminal(options) {
            var client = new WSSHClient();
            var term = new Terminal({
                rows: 40,
                cursorBlink: true, // 光标闪烁
                cursorStyle: "block", // 光标样式  null | 'block' | 'underline' | 'bar'
                scrollback: 800, //回滚
                tabStopWidth: 8, //制表宽度
                screenKeys: true,
                foreground: 'yellow', //字体
                background: '#4c3636', //背景色
                cursor: 'help',//设置光标
            });
            term.writeln('Welcome to MyWebSSH\r');
            term.on('data', function (data) {
                //键盘输入时的回调函数
                client.sendClientData(data);
            });
            term.open(document.getElementById('terminal'));
            //在页面上显示连接中...
            term.write('Connecting...\r');
            //执行连接操作
            client.connect({
                onError: function (error) {
                    //连接失败回调
                    term.write('Error: ' + error + '\r\n');
                },
                onConnect: function () {
                    //连接成功回调
                    client.sendInitData(options);
                },
                onClose: function () {
                    //连接关闭回调
                    term.write("\rconnection closed");
                },
                onData: function (data) {
                    //收到数据时回调
                    term.write(data);
                }
            });
        }
    </script>

</head>
<body>
<!-- particles.js container -->
<div id="terminal" style="width: 100%;height: 100%; display: none;"></div>

<div id="input" style="display:block;">
    <div id="particles-js"></div>
    <div id="wrapper">
        <div style="margin-top: 50%">
            <h1 style="font-family: Arial;shape-margin: 10px;color: #0f88eb;font-size: 35px">MyWebSSH</h1>
        </div>
        <nav class="switch_nav">
            <a href="javascript:;" id="switch_login" class="switch_btn on">登陆</a>
            <div class="switch_bottom" id="switch_bottom"></div>
        </nav>
        <div>
            <ul class="group_input">
                <li>
                    <input type="text" value="localhost" class="mobile required" id="ip" placeholder="IP"/>
                </li>
                <li>
                    <input type="text" value="22" class="mobile required" id="port" placeholder="端口"/>
                </li>
                <li>
                    <input type="text" value="root" class="mobile required" id="username" placeholder="用户名"/>
                </li>
                <li>
                    <input type="password" class="psd required" id="pwd" placeholder="密码"/>
                </li>
            </ul>
            <button type="submit" class="submit_btn" onclick="connect();">登陆</button>

        </div>
        <div id="footer">
			<span style="margin-top: 10px">Powered By：<!--<a href="/">首页</a>--> • <a href="http://www.mryan.xyz">MRyanBlog</a> • <a
                    href="http://www.mryan.xyz/index.php/aboutme.html">关于我</a>
            • <a href="https://gitee.com/Ryan_ma">Gitee</a>
            </span>
        </div>
    </div>
</div>
<script src="../static/assets/libs/jquery-1.12.4/jquery.min.js"></script>
<script src="../static/assets/libs/particles/particles.min.js"></script>
<script src="../static/assets/libs/particles/js/app.js"></script>
</body>
</html>
